<template>
  <div class="root">
    <div class="left">
      <div class="tip">我们的预订系统为您服务</div>
      <div class="step one">
        <div class="icon"></div>
        <div class="text">您的所有付款都是安全且受保护的</div>
        <br />
      </div>
      <div class="step">
        <div class="icon"></div>
        <div class="text">SAM保证已覆盖您</div>
        <br />
      </div>
      <div class="step">
        <div class="icon"></div>
        <div class="text">我们的支持团队会在整个过程中为您服务</div>
        <br />
      </div>
      <div>
        <el-button class="learn-more" type="success" @click="about">学到更多</el-button>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>
<script>
export default {
  methods: {
    about(){
      this.$router.push("about")
    }
  },
}
</script>

<style lang="scss" scoped>
$rootHeight: 600px;
$leftOrRightHeght: 80%;
$leftOrRightWidth: 35%;
$leftOrRightMarginTop: 5%;
$rightWidth: 55%;

$stepWidth: 100%;
$stepHeight: 15%;
$stepMarginTop: 4%;
$oneMarginTop: 8%;

$iconWidth: 8%;
$iconHeight: 50%;

$textMarginTop: 2%;
$textMarginLeft: 2%;
.root {
  height: $rootHeight;
  // border: 1px solid red;
  //position: relative;
  .left {
    // border: 1px solid green;
    float: left;
    height: $leftOrRightHeght;
    width: $leftOrRightWidth;
    margin-top: $leftOrRightMarginTop;
  }
  .right {
    @extend .left;
    width: $rightWidth;
    background-image: url("/images/1197392907362214168.png");
    background-size: 100% 100%;
  }
  .tip {
    font-family: 微软雅黑;
    font-size: 34px;
    color: rgb(51, 51, 51);
    background-color: rgba(255, 255, 255, 0);
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 0px;
    line-height: normal;
    text-shadow: none;
  }
  .step {
    width: $stepWidth;
    height: $stepHeight;
    //border: 1px solid green;
    margin-top: $stepMarginTop;
    .icon {
      width: $iconWidth;
      height: $iconHeight;
      background-image: url("/images/1197391473426145560.png");
      background-size: 100% 100%;
      float: left;
    }
    .text {
      float: left;
      font-family: 微软雅黑;
      font-size: 16px;
      color: rgb(51, 51, 51);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      margin-top: $textMarginTop;
      margin-left: $textMarginLeft;
    }
  }
  .one {
    margin-top: $oneMarginTop;
  }
  .learn-more {
    margin-top: $stepMarginTop;
    white-space: nowrap;
    background-color: #08c781;
    &:hover {
      background-color: #07b176;
    }
  }
}
</style>